<include file="public@header"/>
</head>
<body>
    <div class="wrap">
        <form class="form" method="post" action="" id="form">
            <input type="hidden" name="id" value="{:isset($data)?$data.id:''}" />
            <div class="form-group">
                <label for="title">文章标题</label>
                <input type="text" class="form-control" maxlength="30" id="title" name="title" value="{:isset($data)?$data.title:''}"/>
            </div>
            <div class="form-group">
                <label for="content">文章详情</label>
                <textarea id="content" name="content" style="width:100%;height:640px">{:isset($data)?$data.content:''}</textarea>
            </div>
            <button class="btn btn-primary" type="submit">确定</button>
            <a href="{:url('admin/article/listing')}" class="btn btn-default">返回</a>
        </form>
    </div>
    <script language="javascript" type="text/javascript" src="__ROOT__/assets/src/js/ckeditor/ckeditor.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <script language="javascript" type="text/javascript">
        CKEDITOR.config.filebrowserImageUploadUrl = "{:url('admin/public/uploadImg')}";
        var editor = CKEDITOR.replace('content');
        //CKEDITOR.config.width=375;
        CKEDITOR.config.height=350;
        CKEDITOR.config.toolbarGroups = [
            //{ name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
            //{ name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
//            { name: 'links', groups:[] },
            { name: 'insert' },
//            { name: 'forms' },
//            { name: 'tools' },
//            { name: 'document',	   groups: [ 'mode', 'document', 'doctools' ] },
//            { name: 'others' },
            '/',
            { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
            { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
            { name: 'styles' },
            { name: 'colors' }
        ];
        function uplaodImage() {
            editor.on('change', function (e) {
                var a = e.editor.document;
                var b = a.find("img");
                var count = b.count();
                for(var i=0;i<count;i++){
                    var src =b.getItem(i).$.src;//获取img的src
                    if(src.substring(0,10)=='data:image'){ //判断是否是二进制图像，是才处理
                        var img1=src.split(',')[1];
                        var img2=window.atob(img1);
                        alert('img2 size='+img2.length);
                        var ia = new Uint8Array(img2.length);
                        for (var x = 0; x < img2.length; x++) {
                            ia[x] = img2.charCodeAt(x);
                        };
                        //获得图片的类型
                        var w1=src.indexOf(":");//获得指定字符的第一个下标值
                        var w2=src.indexOf(";");
                        var imgType= src.substring(w1+1, w2);//返回一个包含从 start 到最后（不包含 end ）的子字符串的字符串
                        var blob=new Blob([ia], {type:imgType});
                        var formdata=new FormData();
                        formdata.append('croppedImage',blob);

                        $.ajax({
                            type:"POST",
                            url:'{:url("admin/public/uploadImg")}',//服务器url
                            async:false,//同步，因为修改编辑器内容的时候会多次调用change方法，所以要同步，否则会多次调用后台
                            data:formdata,
                            processData: false,
                            contentType: false,
                            success:function(json){
                                var imgurl=json.url; //获取回传的图片url
                                //alert('返回的url='+imgurl);

                                //获取并更改到现有的图片标签src的值
                                b.getItem(i).$.src=imgurl;
                                var a = CKEDITOR.instances.content.document.$.getElementsByTagName("img")[i]; //content为textarea的id
                                a.setAttribute('data-cke-saved-src',imgurl);
                            }
                        });
                    }
                }
            });
        }
        $().ready(function() {
            $("#form").validate({
                rules:
                {
                    title: "required",
                    content:"required"
                },
                messages:
                {
                    title: "请输入房族名称",
                    content:"请输入内容"
                }
            });
        });
    </script>
</body>
</html>